<script lang="ts" setup>
import { useMemberStore } from '@/stores'
// icon
import cake1 from '@/static/icon/index/cake1.svg'
import cake2 from '@/static/icon/index/cake2.svg'
import cake3 from '@/static/icon/index/cake3.svg'
// 组件
import iconContainer from '@/components/container/icon-container.vue'
import { ReceiveType } from '@/services/constants'

const memberStore = useMemberStore()

/**
 * 跳转到指定分类
 */
const goToCategroy = (category: number) => {
  if (!memberStore.profile) {
    // 跳转到登录页
    uni.navigateTo({
      url: '/pages/login/login',
    })
    return
  }
  uni.navigateTo({
    url: `/pages/category/category?type=${category}`,
  })
}
</script>

<template>
  <view class="buy-type" hover-class="none">
    <!-- 到店自取 -->
    <view
      class="buy-type-item pick-up animation-slide-left shadow bg-blue"
      :style="[{ animationDelay: '0.2s' }]"
      hover-class="none"
      @click="goToCategroy(ReceiveType.PICKUP)"
    >
      <!-- 标题 -->
      <view class="title" hover-class="none">
        <text class="cn">到店自取</text>
        <!-- 英语 -->
        <text class="en">Pick Up</text>
      </view>
      <!-- 图片 -->
      <view class="cake-img" hover-class="none">
        <icon-container :icon="cake1" :size="'150rpx'"></icon-container>
      </view>
    </view>
    <!-- 蛋糕预订 -->
    <view
      class="buy-type-item delivery animation-slide-right shadow bg-orange"
      :style="{ animationDelay: '0.2s' }"
      @click="goToCategroy(ReceiveType.DELIVERY)"
    >
      <view class="title" hover-class="none">
        <text class="cn">外卖配送</text>
        <!-- 英语 -->
        <text class="en">Delivery</text>
      </view>
      <!-- 图片 -->
      <view class="cake-img" hover-class="none">
        <iconContainer :icon="cake3" :size="'150rpx'"></iconContainer>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
/* 蛋糕购买类型 */
.buy-type {
  width: 90%;
  margin: 0 auto;
  background-color: transparent;
  color: #333;
  // 圆角
  border-radius: 20rpx;
  // 上外边距
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // 上内边距
  padding-top: 20rpx;
  // 下内边距

  .navigator {
    width: auto;
  }

  /* 购买类型 */
  .buy-type-item {
    // felx布局
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    // 左右外边距
    margin: 0 10rpx;
    width: 50%;
    // 内边距
    padding: 20rpx;
    // 圆角
    border-radius: 20rpx;

    .title {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      width: 100%;

      // 圆角
      border-radius: 10rpx 50rpx 10rpx 50rpx;
      // 内边距
      padding: 15rpx;

      .cn {
        font-size: 30rpx;
        font-weight: 400;
        color: #333;
        // 字体间距
        letter-spacing: 4rpx;
      }
      .en {
        font-size: 20rpx;
        color: #999;
        margin-top: 2%;
      }
    }

    .cake-img {
      width: 100%;
      display: flex; /* 添加 flex 容器属性 */
      justify-content: center; /* 将内容对齐至右侧 */
      align-items: center; /* 垂直居中 */
    }
  }

  /** 到店自取 */
  .pick-up {
    background: rgb(227, 249, 255);
    background: linear-gradient(
      145deg,
      rgb(227, 249, 255) 40%,
      rgba(255, 255, 255, 1) 80%
    );
  }

  /** 外卖配送 */
  .delivery {
    background: rgb(255, 241, 204);
    background: linear-gradient(
      145deg,
      rgba(255, 255, 255, 1) 30%,
      rgb(255, 241, 204) 70%
    );
  }
}
</style>
